<script setup>
import { ref, reactive, computed } from "vue";

</script>
<!-- ./assets/logo.svg -->

<template>
  <div class="body">
  <img src="./assets/bg_title.png" class="bg_title" />
  <!-- <div class="explore">Explore your favorite traits and enjoy love!</div> -->
  <img src="./assets/swiper.png" class="discover_title"/>
  <div style="height: 168px"></div>
  <div class="discover">
    <div>
      <!-- <div class="discover_title">Discover Your Perfect Match</div> -->
      <img src="./assets/discover.png" class="discover_title"/>
      <div class="discover_text">
        With ONS, connecting with your ideal partner is as easy as a swipe! Our
        cutting-edge matching algorithms factor in your preferences and
        interests, giving you tailored matches that suit your unique
        personality. Whether you're in search of casual companionship or a
        profound, meaningful connection, ONS allows you to explore a wide array
        of potential matches, bringing you one swipe closer to finding love.
      </div>
    </div>
    <img src="./assets/card1.png" class="card" />
  </div>
  <div style="height: 168px"></div>
  <div class="discover">
    <img src="./assets/card2.png" class="card" />
    <div>
      <!-- <div class="discover_title">Safe, Secure, and Serendipitous</div> -->
      <img src="./assets/safe.png" class="discover_title"/>
      <div class="discover_text">
        Your safety is paramount at ONS. We've established rigorous security
        protocols to create a secure and protected environment for all our
        users. Feel assured as you explore the unexpected joys of online dating,
        knowing that ONS is devoted to maintaining your privacy. With ONS,
        you'll have more chances to form real connections with interesting
        people nearby, putting an end to those lonely moments.
      </div>
    </div>
  </div>
  <div style="height: 90px"></div>
  <p>
    <a>www.ons-app.net</a>
    <a>Contact us: contact@ons-app.net</a>
    <a href="/Terms.html" target="_blank">Terms</a>
    <a href="/PrivacyPolicy.html" target="_blank">Privacy Policy</a>
    <a href="/delete.html" >Account deletion</a>
  </p>
</div>
</template>

<style scoped>

@font-face {
  font-family: "LexendDeca";
  src: url("/font/LexendDeca-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -8px;
  padding: 283px 0 70px;
  background-image: url("./assets/bg.jpg");
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center center; 
}

.bg_title {
  width: 487px;
}

.explore {
  width: 714px;
  margin-top: 14px;
  color: #fff;
  text-align: center;
}

.discover {
  display: flex;
  align-items: center;
  margin: 0 94px;
  gap: 80px;
}

.discover_title {
  width: 714px;
  color: #ef49de;
  margin-bottom: 47px;
}
.discover_text {
  width: 629px;
  color: #fff;
  font-family: "LexendDeca";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px; /* 175% */
}
.card {
  width: 376px;
  height: 492px;
}
a {
  color: #fff;
  font-family: "LexendDeca";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px; /* 250% */
  margin: 0 25px;
  /* text-decoration: none; */
}

a:hover {
  color: #007bff;
  text-decoration: underline;
}
</style>
